<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col style="display: flex;justify-content: space-between; margin-bottom: 20px;">
            <span style="color: red; opacity: 0.3; font-size: 12px;">说明:目前支持学科和关键字条件筛选</span>
            <el-button style="margin-right: 70px;" type="success" size="mini" icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
          </el-col>
        </el-row>
        <el-form :model="form" ref ='form' label-width="70px" style="margin-bottom: 15px;">
            <el-row >
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="学科">
                <el-select v-model="form.simpleId" @change="changeSimple"  class="whidth"  size="mini"  placeholder="请选择">
                  <el-option
                   v-for="item in simple"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
                   ></el-option>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="6">
               <el-form-item style="display: inline-block; width: 100%;" label="二级目录">
                <el-select v-model="form.CatalogValue" class="whidth"  size="mini"  placeholder="请选择">
                  <el-option
                  v-for="item in Catalog"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="标签">
                  <el-select v-model="form.TagValue" class="whidth"  size="mini"  placeholder="请选择">
                  <el-option
                  v-for="item in simpleTagList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="关键字">
                  <el-input  v-model="form.keywords" size="mini" class="whidth"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="试题类型">
                <el-select v-model="form.questionTypeValue"  class="whidth"  size="mini"  placeholder="请选择">
                  <el-option
                  v-for="item in questionTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="6">
               <el-form-item style="display: inline-block; width: 100%;" label="难度">
                <el-select v-model="form.difficultyValue" class="whidth"  size="mini"  placeholder="请选择">
                  <el-option
                  v-for="item in difficultyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  ></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="方向">
                  <el-select v-model="form.directionValue" class="whidth"  size="mini"  placeholder="请选择">
                  <el-option
                  v-for="(item,index) in directionList"
                  :key="index"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="录入人">
                  <el-select v-model="form.simpleUserId" class="whidth"  size="mini"  placeholder="请选择">
                  <el-option
                  v-for="item in simpUser"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                  ></el-option>
                </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="题目备注">
                  <el-input size="mini" class="whidth"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="6">
               <el-form-item style="display: inline-block; width: 100%;" label="企业简称">
                <el-input size="mini" class="whidth"></el-input>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 100%;" label="城市">
                  <el-select v-model="form.provincesValue" @change="provChange" style="width: 39%;margin-right: 7px;" size="mini"  placeholder="请选择">
                  <el-option
                  v-for="(item,index) in provincesList"
                  :key="index"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
                  <el-select v-model="form.citysAreaValue" style="width: 39%;"  size="mini"  placeholder="请选择">
                  <el-option
                  v-for="(item,index) in citysAreaList"
                  :key="index"
                  :label="item"
                  :value="item"
                  ></el-option>
                </el-select>
               </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item style="display: inline-block; width: 83%;text-align: right;">
                  <el-button size="mini" @click="reset">清除</el-button>
                  <el-button type="primary" size="mini" @click="submit">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
        <!-- 表格 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>
        <el-alert
          :title="'数据一共'+counts+'条'"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 20px;"
          >
        </el-alert>
        <questionsTable  @updateValueSubmit="updateValueSubmit"    :questionTypeList="questionTypeList" :tabledata="tabledata"  ></questionsTable>
        <div class="block"  v-if=" shouldShowPagination ">
          <el-pagination v-show="tabledata.length !== 0" ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            background
            :page-size='5'
            :page-sizes="[5,10,20,50]"
            :sizes="pagesize"
            layout="prev, pager,next,sizes,jumper"
            :total="counts">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as simpleUser } from '@/api/base/users.js'
import { simple as simpleCatalog } from '@/api/hmmm/directorys.js'
import { simple as simpleTag } from '@/api/hmmm/tags.js'
import questionsTable from '@/module-hmmm/components/questions-table'
// 静态数据
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  components: {
    questionsTable
  },
  data () {
    return {
      // 头部
      simple: [], // 学科
      Catalog: [], // 二级目录数据
      simpleTagList: [], // 标签数据
      questionTypeList: [], // 题型数据
      difficultyList: [], // 难度数据
      directionList: [], // 方向数据
      simpUser: [], // 录入人
      provincesList: [], // 一级城市数据
      citysAreaList: [], // 二级城市
      shouldShowPagination: true, // 是否显示分页组件
      form: {
        simpleId: '', // 学科id
        CatalogValue: '', // 二级目录value
        TagValue: '', // 标签value
        questionTypeValue: '', // 题型value
        difficultyValue: '', // 难度value
        directionValue: '', // 方向value
        simpleUserId: '', // 录入人id
        provincesValue: '', // 一级城市value
        citysAreaValue: '', // 二级城市value
        keywords: ''
      },
      counts: 0, // 总条数
      activeName: 'all',
      page: 1, // 页码
      pagesize: 5, // 每页条数
      chkState: 1, // 审核状态 : 0 待审核  1通过  2 拒绝,
      tabledata: [] // 渲染数据
    }
  },
  methods: {
    // 获取全部精选题库数据
    async getChoice (data) {
      const res = await choice(data)
      this.counts = res.data.counts
      this.tabledata = res.data.items
      if (this.calculateTotalPages() === 1) {
        this.shouldShowPagination = false
      } else {
        this.shouldShowPagination = true
      }
    },
    // 获取学科
    async getSimple () {
      const res = await simple()
      this.simple = res.data
    },
    // 学科选择
    async changeSimple () {
      console.log(this.simpleId)
      const res = await simpleCatalog({ subjectID: this.simpleId })
      const res1 = await simpleTag({ subjectID: this.simpleId })
      this.Catalog = res.data
      this.simpleTagList = res1.data
    },
    // 获取录入人
    async simpleUser () {
      const res = await simpleUser()
      this.simpUser = res.data
    },
    // 获取一级城市
    async getCitys () {
      const res = await provinces()
      this.provincesList = res
    },
    // 获取二级城市
    provChange () {
      const res = citys(this.form.provincesValue)
      this.citysAreaList = res
    },
    // 搜索按钮
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.getChoice({ subjectID: this.form.simpleId, keyword: this.form.keywords, page: this.page, pagesize: this.pagesize })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 清除按钮
    reset () {
      this.form = {}
      this.getChoice({ page: this.page, pagesize: this.pagesize })
    },
    // <--------中部----------->
    // 审核状态切换
    handleClick (tab, event) {
      if (tab.paneName === 'all') {
        this.getChoice({ page: this.page, pageSize: this.pageSize })
      } else if (tab.paneName === '0') {
        this.getChoice({ page: this.page, pageSize: this.pageSize, chkState: tab.paneName })
      } else if (tab.paneName === '1') {
        this.getChoice({ page: this.page, pageSize: this.pageSize, chkState: tab.paneName })
      } else if (tab.paneName === '2') {
        this.getChoice({ page: this.page, pageSize: this.pageSize, chkState: tab.paneName })
      }
    },
    // 当每页条数改变时触发事件
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val

      this.getChoice({ page: this.page, pagesize: this.pagesize })
    },
    // 当前页码改变时触发事件
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getChoice({ page: this.page, pagesize: this.pagesize })
    },
    // 只有一页 隐藏分页器
    calculateTotalPages () {
      const totalRecords = this.counts
      return Math.ceil(totalRecords / this.pagesize)
    },
    // 处理题干html标签
    clearHTMLTag (str) {
      return str.replace(/<[^>]+>/g, '')
    },
    // 处理时间
    fromTime (timer) {
      const jsonDate = new Date(timer).toJSON()
      // 东八区需要加八小时
      const Datatimer = new Date(jsonDate).getTime() + 8 * 3600 * 1000
      return new Date(Datatimer)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    // 子组件通知父组件重新获取数据
    updateValueSubmit () {
      this.getChoice({ page: this.page, pagesize: this.pagesize })
    }

  },
  created () {
    // 获取全部精选题库数据
    this.getChoice({ page: this.page, pagesize: this.pagesize })
    // 获取学科
    this.getSimple()
    // 获取录入人
    this.simpleUser()
    // 静态数据
    this.directionList = direction // 方向
    this.difficultyList = difficulty // 难度
    this.questionTypeList = questionType // 题型
    // 获取一级城市
    this.getCitys()
  }
}
</script>

<style scoped lang="scss">
.whidth{
  width: 80%;
}
.box-card{
  border: none;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 0;
}
::v-deep #card .el-card__body{
  padding: 0;
}
.block{
  text-align: right;
  margin-top: 20px;
}
</style>
